<template>
    <div class="f-menu" :style="{ width: $store.state.asideWidth }">
        <el-menu :default-active="defaultActive" class="border-0" @select="handleSelect" :collapse="isCollapse"
            :collapse-transition="false">
            <template v-for="(item1, index1) in asideMenu" :key="index1">
                <el-sub-menu v-if="item1.children && item1.children.length > 0" :index="'/1' + index1">
                    <template #title>
                        <el-icon>
                            <component :is="item1.icon"></component>
                        </el-icon>
                        <span>{{ item1.name }}</span>
                    </template>
                    <template v-for="(item2, index2) in item1.children" :key="index2">
                        <el-sub-menu v-if="item2.children && item2.children.length > 0" :index="'/2' + index2">
                            <template #title>
                                <el-icon>
                                    <component :is="item2.icon"></component>
                                </el-icon>
                                <span>{{ item2.name }}</span>
                            </template>
                            <el-menu-item v-for="(item3, index3) in item2.children" :key="index3"
                                :index="'/' + item3.url">
                                <el-icon>
                                    <component :is="item3.icon"></component>
                                </el-icon>
                                <span>{{ item3.name }}</span>
                            </el-menu-item>
                        </el-sub-menu>
                        <el-menu-item v-else :index="'/' + item2.url">
                            <el-icon>
                                <component :is="item2.icon"></component>
                            </el-icon>
                            <span>{{ item2.name }}</span>
                        </el-menu-item>
                    </template>
                </el-sub-menu>

                <el-menu-item v-else :index="'/' + item1.url">
                    <el-icon>
                        <component :is="item1.icon"></component>
                    </el-icon>
                    <span>{{ item1.name }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { computed, ref } from 'vue'
import { useStore } from 'vuex';

const store = useStore()
const router = useRouter()
const route = useRoute()

// 菜单默认打开位置
const defaultActive = ref(route.path)

//是否折叠
const isCollapse = computed(() => {
    return store.state.asideWidth == '250px' ? false : true
})

const asideMenu = computed(() => {
    return store.state.menus
})


const handleSelect = (e) => {
    router.push(e)
}
</script>

<style>
.f-menu {
    transition: all 0.2s;
    width: 250px;
    top: 64px;
    bottom: 0px;
    left: 0;
    overflow-y: auto;
    overflow-x: hidden;
    @apply shadow-md fixed bg-light-50;
}

.f-menu::-webkit-scrollbar {
    width: 0px;
}
</style>